<script lang="ts" setup>
import { ref, reactive } from 'vue'
import ReturnCarLoading from '@/components/basic/ReturnCarLoading.vue'
import { assistReturnBike } from '@/api/bike'
import { getToken } from '@/utils/cache/cookies'
import { AssistReturnBikeType } from '@/types/enum'
const dialogVisible = ref<boolean>(false)
const bikeId = ref<string>('')
const setId = (id: string) => {
  bikeId.value = id
}
const open = () => {
  dialogVisible.value = true
  getReturnData(0)
}
defineExpose({ open, setId })
const active = ref<number>(0)
const title = ref<string>('还车中...')

type statusType = 'wait' | 'process' | 'error' | 'success'
type Title = Record<statusType, string>
interface totalDataType {
  title: Title
  loading: boolean
  status: statusType
}

const totalData = reactive<totalDataType[]>([
  {
    title: {
      wait: '头盔归还校验',
      process: '头盔有无归还校验中...',
      error: '头盔未归还',
      success: '头盔已归还'
    },
    loading: false,
    status: 'wait'
  },
  {
    title: {
      wait: '仓内有无电池校验',
      process: '仓内有无电池校验中...',
      error: '仓内无电池',
      success: '仓内有电池'
    },
    loading: false,
    status: 'wait'
  },
  {
    title: {
      wait: '电池仓状态校验',
      process: '电池仓状态校验中...',
      error: '电池仓未关闭',
      success: '电池仓已关闭'
    },
    loading: false,
    status: 'wait'
  },
  {
    title: {
      wait: '还车位置校验',
      process: '还车位置校验中...',
      error: '车辆未还车范围内',
      success: '车辆在还车范围内'
    },
    loading: false,
    status: 'wait'
  },
  {
    title: {
      wait: '车辆关锁',
      process: '车辆关锁中...',
      error: '关锁失败',
      success: '关锁成功'
    },
    loading: false,
    status: 'wait'
  },
  {
    title: {
      wait: '还车结果',
      process: '还车中...',
      error: '还车失败',
      success: '还车成功'
    },
    loading: false,
    status: 'wait'
  }
])
/**
 * @todo 待测试
 */
const getReturnData = async (type: number) => {
  if (type >= totalData.length) {
    title.value = '还车成功'
    return
  }
  try {
    totalData[type].loading = true
    totalData[type].status = 'process'
    const res = await assistReturnBike({
      token: getToken() ?? '',
      bikeId: bikeId.value,
      type: type as AssistReturnBikeType
    })
    totalData[type].status = +res.statusCode ? 'error' : 'success'
    active.value = type
    totalData[type].loading = false
    if (+res.statusCode) {
      title.value = '还车失败'
      return
    }
    await getReturnData(type + 1)
  } catch (error) {
    totalData[type].status = 'error'
    totalData[type].loading = false
    console.error(error)
  }
}
</script>

<template>
  <el-dialog
    v-model="dialogVisible"
    :title="title"
    top="30vh"
    width="850px"
    class="return-car-dialog"
  >
    <el-steps :active="active" align-center>
      <el-step
        v-for="(step, index) in totalData"
        :title="step.title[step.status]"
        :status="step.status"
        :key="index"
      >
        <template #icon>
          <return-car-loading :is-loading="step.loading" :status="step.status" />
        </template>
      </el-step>
    </el-steps>
  </el-dialog>
</template>

<style scoped>
:deep(.el-step__title.is-wait) {
  color: var(--xy-normal-text-color);
}
:deep(.el-step__title.is-process) {
  color: #ff8140;
  font-weight: 400;
}
:deep(.el-step__title.is-success) {
  color: #333333;
}
:deep(.el-step__title.is-error) {
  color: var(--xy-primary-color);
}
:deep(.el-step__head.is-wait) {
  border-color: #f2f2f2;
  color: #f2f2f2;
}
:deep(.el-step__head.is-process) {
  border-color: #f2f2f2;
  color: #f2f2f2;
}
:deep(.el-step__head.is-success) {
  border-color: #f2f2f2;
  color: #f2f2f2;
}
:deep(.el-step__head.is-error) {
  border-color: #f2f2f2;
  color: #f2f2f2;
}
</style>
